<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title th:text="#{screen.consent.title}">Consent View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />

    <link rel="stylesheet" th:href="@{#{webjars.bootstrap-selectmin.css}}">
    <script th:src="@{#{webjars.bootstrap-selectmin.js}}"></script>
    <script th:src="@{#{webjars.bootstrapmin.js}}"></script>
    
    <link rel="stylesheet" th:href="@{#{webjars.datatables.bootstrapmin.css}}"/>
    <script th:src="@{#{webjars.datatables.jquery.datatablesmin.js}}"></script>
    <script th:src="@{#{webjars.datatables.datatables.bootstrapmin.js}}"></script>

    <script th:inline="javascript">
        /*<![CDATA[*/
        var data = {
            attributes: /*[[${attributes}]]*/
        };
        var strings = {
            info: /*[[#{screen.consent.attributes.data.info}]]*/
        };
        /*]]>*/
    </script>
    <script type="text/javascript" th:inline="javascript">

        function jqueryReady() {
            head.load(
                /*[[@{/js/consent.js}]]*/
            );
        }
    </script>
</head>

<body>
<main role="main" class="container mt-3 mb-3">
    <div layout:fragment="content">

        <form method="post" id="fm1">
            <div class="alert alert-info">
                <h2 th:text="#{screen.consent.title}">Attribute Consent</h2>

                <ul class="nav nav-tabs" id="consentTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="attributes-tab" data-toggle="tab" href="#attributesPanel"
                           role="tab" aria-controls="attributes" aria-selected="true"
                           th:text="#{screen.consent.attributes}">Attributes</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="options-tab" data-toggle="tab" href="#optionsPanel" role="tab"
                           aria-controls="options" aria-selected="false" th:text="#{screen.consent.options}">Options</a>
                    </li>
                </ul>

                <div class="mb-4 tab-content" id="consentTabsContent">
                    <div class="tab-pane fade show active bg-white p-4" id="attributesPanel" role="tabpanel"
                         aria-labelledby="attributes-tab">
                        <p th:utext="#{screen.consent.attributes.header(${service.id})}">The following attributes will
                            be released to</p>
                        <table id="attributesTable" class="display table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th th:text="#{screen.consent.attributes.attribute}">Attribute</th>
                                <th th:text="#{screen.consent.attributes.values}">Value(s)</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                    <div class="tab-pane fade bg-white p-4" id="optionsPanel" role="tabpanel"
                         aria-labelledby="options-tab">
                        <div class="card mb-4">
                            <div class="card-header bg-info text-white" th:text="#{screen.consent.options.header}">How
                                should I be prompted
                                for consent again?
                            </div>
                            <div class="card-body">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="option" id="optionAlways"
                                           value="0"
                                           th:checked="${option == 0}"
                                           onclick="optionSelected()"/>
                                    <label class="form-check-label" for="optionAlways"
                                           th:utext="#{screen.consent.options.always}">Always</label>
                                    <span class="help-block"
                                          th:text="#{screen.consent.options.desc.always(${service.id})}">help block</span>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="option" id="optionAttributeName"
                                           value="1"
                                           th:checked="${option == 1}"
                                           onclick="optionSelected()"/>
                                    <label class="form-check-label" for="optionAttributeName"
                                           th:utext="#{screen.consent.options.attributename}">Attribute Name</label>
                                    <span class="help-block"
                                          th:text="#{screen.consent.options.desc.attributename(${service.id})}">help block</span>
                                    </span>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="option" value="2"
                                           th:checked="${option == 2}"
                                           onclick="optionSelected()" />
                                    <label class="form-check-label" th:utext="#{screen.consent.options.attributevalue}">Attribute
                                        Value</label>
                                    <span class="help-block" th:utext="#{screen.consent.options.desc.attributevalue.intro} +
                                      '<ul><li>' +
                                      #{screen.consent.options.desc.attributevalue.first(${service.id})} +
                                      '</li><li>' +
                                      #{screen.consent.options.desc.attributevalue.second(${service.id})} +
                                      '</li><li>' +
                                      #{screen.consent.options.desc.attributevalue.third(${service.id})} +
                                      '</li><ul>'"/>

                                </div>
                            </div>
                        </div>

                        <div id="reminderPanel" class="card">
                            <div class="card-header bg-info text-white"
                                 th:text="#{screen.consent.options.reminder.header}">How often should I be reminded to
                                consent again?
                            </div>
                            <div class="card-body">
                                <p th:text="#{screen.consent.options.reminder.expl(${service.id})}">Show the consent
                                    screen, as a
                                    reminder, in the event that there is no change to the collection of attributes
                                    released to
                                    {0}.</p>

                                <table>
                                    <tr>
                                        <td>
                                            <input name="reminder" id="reminder" class="form-control" type="number"
                                                   th:value="${reminder}">
                                        </td>
                                        <td>
                                            <select name="reminderTimeUnit" id="reminderTimeUnit" class="form-control">
                                                <option value="seconds"
                                                        th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'seconds'}"
                                                        th:text="#{screen.consent.options.timeunit.seconds}">Seconds
                                                </option>
                                                <option value="minutes"
                                                        th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'minutes'}"
                                                        th:text="#{screen.consent.options.timeunit.minutes}">Minutes
                                                </option>
                                                <option value="hours"
                                                        th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'hours'}"
                                                        th:text="#{screen.consent.options.timeunit.hours}">Hours
                                                </option>
                                                <option value="days"
                                                        th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'days'}"
                                                        th:text="#{screen.consent.options.timeunit.days}">Days
                                                </option>
                                                <option value="weeks"
                                                        th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'weeks'}"
                                                        th:text="#{screen.consent.options.timeunit.weeks}">Weeks
                                                </option>
                                                <option value="months"
                                                        th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'months'}"
                                                        th:text="#{screen.consent.options.timeunit.months}">Months
                                                </option>
                                                <option value="years"
                                                        th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'years'}"
                                                        th:text="#{screen.consent.options.timeunit.years}">Years
                                                </option>
                                            </select>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div> <!-- end Options Panel -->
                </div>

            </div>
            <div class="text-center form-group">
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="confirm"/>
                <input class="btn btn-submit"
                       name="confirm"
                       accesskey="l"
                       th:value="#{screen.consent.confirm}"
                       value="Confirm"
                       type="submit"/>
                <a class="btn btn-default" id="cancel" name="cancel"
                   th:href="@{/login}" th:text="#{screen.consent.cancel}">Cancel</a>
            </div>
        </form>
    </div>
</main>
</body>
</html>
